var vm = new Vue({
    el: '#main-container',
    data: function() {
        return {
            pageInfo: {
                current: 1,
                size: 5
            },
            setting: {
                data: {
                    simpleData: {
                        enable: true,
                        pIdKey: 'parentId'//根据node节点中的parentId属性来作为pId属性值
                    }
                },
                callback:{
                    // beforeClick:this.beforeClick,
                    onClick:this.onClick
                },
                view:{/*显示处理回调设置*/
                    fontCss: this.fontCss
                }
            },
            nodes: [],
            treeObj: {},
            params:{
                dataScope:'',//默认值，让下拉出现的时候默认被选中
                id:'',
                name:'',
                remarks:''
            },
            name:'全部',  //显示office的名字
            up:false,    //显示向上向下的标记
            role:{}
        }
    },
    methods: {
        select: function (current,size) {
            //查询后台，返回分页数据，更新vue的pageInfo对象
            axios({
                url:`/manager/role/select/${current}/${size}`,
                params:this.params
            }).then(response => {
                this.pageInfo = response.data.data;
            })
        },
        selectAll:function(){
            this.params={//提交后台用的参数对象
                dataScope:'',//默认值，让下拉出现的时候默认被选中
                id:'',
                name:'',
                remarks:''
            };
            this.name = '全部';
            this.up=false;      //显示向上向下的标记
            //chosen 生成的 dom 是原生 dom节点 不能 通过vue 双向绑定 自动更新
            //更新组件数据   先还原 chosen生成的选项 为不选中
            $("#userDataScope option").each(function(j,obj){
                obj.selected='';
            });
            //更新生成选项dom
            //chosen:updated - 当选项有变化时，可以主动触发该事件，chosen会重新渲染select组件
            $("#userDataScope").trigger("chosen:updated");
            this.select(1,this.pageInfo.size);
        },
        toUpdate: function (id) {//到更新页
            //TODO 根据id查出role信息
            let index = layer.open({
                type:2,
                title:'角色修改',
                content:'/manager/role/role-save.html',
                area:['80%','80%'],
                end: () => {//将then函数中的this传递到end的回调函数中
                    //刷新页面数据
                    this.select(1,this.pageInfo.size);
                }
            });

        },
        toDetail(roleId){
            axios({
                url:'/manager/role/selectOne',
                params: {id:roleId}
            }).then(response=>{
                if (response.data.code!=200) {
                    layer.msg(response.data.msg); // 弹出提示框
                    return;
                }
                layer.role = response.data.data;
                console.log(layer);
                //打开layer的所在的页面
                layer.open({
                    type:2,//类型：0信息框  1 页面层  2 iframe层  3 加载层  4 tips层
                    title:'角色详情',
                    content: '/manager/role/role-detail.html',
                    area: ['60%','80%'],
                    end: ()=>{
                        this.select(this.pageInfo.current,this.pageInfo.size);
                    }
                })
            });
        },
        managerUsers:function(rid,name){//跳转到用户角色授权页面 role-user
            layer.rid = rid;//数据，绑定到layer上，传递给子窗口
            layer.name = name
            let index = layer.open({
                type:2,
                title:'用户角色授权',
                content:'/manager/role/role-user.html',
                area:['80%','80%']
            });
        },
        initTree:function(){//初始化ztree
            //获取nodes
            axios({
                url:'/manager/office/selectAll'
            }).then(response => {
                this.nodes = response.data.data;//   this.setNodes(.....)
                this.nodes[this.nodes.length]={
                    "id": 0,
                    "name": "所有机构"
                }
                this.treeObj =   $.fn.zTree.init($("#pullDownTreeone"),this.setting,this.nodes);
                // console.log(this.treeObj)  ;
            })
        },
        onClick:function(event, treeId, treeNode){
            if(!treeNode.id==0){
                this.params.id=treeNode.id;
                this.name = treeNode.name;
            }else{
                this.params.id='';
                this.name = ''
            }
            this.select(1, this.pageInfo.size)
        },
        search:function () {
            /*
            * 1.获取树对象
            * 2.调用getNodesByParamFuzzy(属性名,属性值,父节点id)模糊匹配节点
            * */
            let zTreeObj = $.fn.zTree.getZTreeObj("pullDownTreeone");
            let nodesbyParamFuzzy = zTreeObj.getNodesByParamFuzzy("name",this.name,null);
            // console.log(nodesbyParamFuzzy);
            /*
            * 3.高亮显示处理
            * */
            //还原所有高亮属性为false
            // console.log(zTreeObj.getNodes());
            //获取所有节点，并转换成简单数据格式
            let treeNodes = zTreeObj.transformToArray(zTreeObj.getNodes());
            for (let i = 0; i < treeNodes.length; i++) {
                treeNodes[i].hightLight=false;
                zTreeObj.updateNode(treeNodes[i]);
            }
            //将查找到的节点高亮属性设置为true
            for (let i in nodesbyParamFuzzy) {
                nodesbyParamFuzzy[i].hightLight=true;//设置高亮属性
                zTreeObj.updateNode(nodesbyParamFuzzy[i])//更新树对象上的节点信息，会自动触发显示回调
            }
        },
        fontCss:function (treeId,treeNode) {
            /*根据高亮标记设置高亮红色*/
            return treeNode.hightLight?{color:'red'}:{color:'black'};
        },
        changeUp:function () {//修改up标记状态
            this.up=!this.up;
        },
        toDelete(roleId){
            layer.msg("是否删除？",{
                time:0,//无自动消失计时
                btn:['是','否'],
                yes:index=>{ //index 是当前消息框的索引
                    axios({
                        url:'/manager/role/delete',
                        params:{
                            id:roleId
                        }
                    }).then(response=>{
                        layer.close(index); //关闭当前msg窗口
                        layer.msg(response.data.msg);
                        //成功刷新数据列表
                        if (response.data.code==200) {
                            this.select(this.pageInfo.current,this.pageInfo.size);
                        }
                    });
                }
            })
        }
    },
    created: function () {
        this.select(1, this.pageInfo.size);
    },
    mounted:function(){
        this.initTree();
        //chosen  下拉列表插件  通过隐藏原select 生成新div  $("#userDataScope").chosen(config): 初始化chosen
        /*
       disable_search : 设置为 true 隐藏单选框的搜索框
       width:Chosen 生成的选择框宽度，默认为和原 select 宽度保持一致
       search_contains: 搜素包含项，默认从第一个字符开始匹配即全匹配   设置为true则为模糊匹配
       其他选项使用参考文档
        */
        $("#userDataScope").chosen({width: "80%",search_contains: true});
        $("#saveUserDataScope").chosen({width: "50%",search_contains: true});
        //需要对下拉列表的change事件处理  通过chosen组件的change事件触发
        // e为事件源   param  封装下拉选项值的参数 json格式{selected:xxx}
        $("#userDataScope").on("change", (e,param) => {
            this.params.dataScope=param.selected;
        })
    }

});